<template>
  <div class="tooltip-box">
    <div class="tooltip-conetnt" v-if="!store.isMobileType">
      <div class="popup__arrow-parent">
        <div class="t-popup__arrow"></div>
      </div>
      <span>音频</span>
    </div>  
    <div
      class="audio-box"
      :class="isPlay && 'audio-rotate'"
      v-if="props.info.audio && props.info.audio.url"
      :style="{
        backgroundImage: `url(${publicUrls + 'free/style7/template7audio.png'})`,
      }"
      @click="audioplay(true)"
    >
      <!-- <i class="doorIcon">&#xe688;</i> -->
    </div>
  </div>
  <audio v-if="props.info.audio && props.info.audio.url" :src="urls + props.info.audio.url" ref="audioRef"></audio>
</template>



<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { urls } from '@/utils/request/upload';
import { defineComponent, ref, defineExpose } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax3.vue';
const props = defineProps({
  info: {
    type: Object,
  },
});
const emit = defineEmits(['audioplayFlase']);
const store = useProjectStore();
const ImgVisible = ref(false);
const audioRef = ref(null);
const videoRef = ref(null);
const isPlay = ref(false);
const audioplay = (flag: boolean = true) => {
  if (audioRef.value.paused && flag) {
    audioRef.value.play();
    if (videoRef.value) {
      videoRef.value.pause();
    }

    isPlay.value = true;
  } else {
    audioRef.value.pause();
    isPlay.value = false;
  }
};

const videoplay = () => {
  audioRef.value.pause();
  isPlay.value = false;
};
defineExpose({ videoplay });
</script>

<style scoped lang="less">
.audio-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .doorIcon {
    font-size: 24px;
    color: #fff;
  }
  z-index: 22;
}
.audio-rotate {
  animation: audio-rotate 3s linear infinite;
  @keyframes audio-rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.tooltip-box {
  display: flex;
  position: relative;
  width: 32px;
  height: 32px;
}
.tooltip-conetnt {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  position: absolute; 
  left: 50%; 
  bottom: -32px; 
  transform: translateX(-50%); 
  width: 50px; 
  height: 24px;
  margin: 2px 0;
  background: rgba(243, 234, 219, 1);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);

  border-radius: 4px;
  span {
    font-family: Microsoft YaHei;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
     color: rgba(180, 170, 152, 1);
    margin-top: 2px;
  }
  :deep(.t-popup__arrow) {
    top: -3px;
    left: 24px;
    // background: rgba(147, 178, 170, 1);
   border-color: rgba(243, 234, 219, 1);
  }
  .t-popup__arrow::before {
     background: rgba(243, 234, 219, 1);
 
  }
}
.tooltip-box:hover {
  .tooltip-conetnt {
    opacity: 1;
  }
}
</style>
